<template>
	<view class="mask flex-box align-center flex-center" @click="close">
		<view class="popupCont" v-if="types==1" @click.stop>
			<image class="popupTopImg" :src="staticUrl+'/lottery/kjjg.png'" mode="scaleToFill"></image>
			<view class="conLists" v-if="pridata.prizeDate.prizeId">
				<view class="susseP">
					<view class="susseImage">
						<text class="icon-xuanzhong iconfont"></text>
					</view>
					<view class="susseTip">恭喜您中奖了</view>
					<view class="pirz">
						<view class="pirz_tip">您获得以下奖品</view>
					</view>
				</view>
				<view class="listItem flex-box">
					<view class="listImg">
						<image :src="$imgUrls(pridata.prizeDate.img)" mode="aspectFill"></image>
					</view>
					<view class="listtext flex">
						<view class="textTitle">{{pridata.prizeDate.title}}</view>
						<view class="textMs">{{pridata.prizeDate.info}}</view>
					</view>
				</view>
				<view class="pirz" v-if="pridata.useDate.useDayResidueNum != 'nolimit'">
					<view class="pirz_tip" v-if="pridata.useDate.useDayResidueNum > 0">
						您还有<text>{{pridata.useDate.useDayResidueNum}}</text>次抽奖机会
					</view>
					<view class="pirz_tip" v-else>今日抽奖机会已用完</view>
				</view>
			</view>
			<view class="conLists" v-else>
				<view class="failImage">
					<text class="iconfont" :class="pridata.prizeDate.class ? pridata.prizeDate.class : 'icon-close-f'"></text>
				</view>
				<view class="susseTip">{{ pridata.prizeDate.title || '很遗憾，没抽中' }}</view>
				<view class="pirz" v-if="pridata.useDate.useDayResidueNum != 'nolimit'">
					<view class="pirz_tip" v-if="pridata.useDate.useDayResidueNum > 0">
						您还有<text>{{pridata.useDate.useDayResidueNum}}</text>次抽奖机会
					</view>
					<view class="pirz_tip" v-else>今日抽奖机会已用完</view>
				</view>
			</view>
			<view class="flex-box flex-center">
				<view class="submitBtn" @click="backHome"
					:style="{'background': 'url('+staticUrl+'/lottery/jx.png) no-repeat','background-size': '100% 100%'}">
					返回首页</view>
				<view class="submitBtn" @click="close"
					:style="{'background': 'url('+staticUrl+'/lottery/jx.png) no-repeat','background-size': '100% 100%'}">
					继续抽奖</view>
			</view>
		</view>

		<view class="popupCont" v-if="types==3" @click.stop>
			<!-- 活动规则 -->
			<image class="popupTopImg" :src="staticUrl+'/lottery/gz.png'" mode="scaleToFill"></image>
			<view class="conLists">
				<view class="rich-text-box">
					<mp-html :content="viewText" lazy-load scroll-table selectable use-anchor show-with-animation />
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: [
			'types',
			'viewText',
			'prizeDate'
		],
		data() {
			return {
				pridata: this.prizeDate,
				imgUrl: this.imgUrl,
				staticUrl: this.staticUrl
			}
		},
		methods: {
			close() {
				this.$emit('closepopup')
			}
		}
	}
</script>

<style scoped lang="scss">
	.mask {
		padding-top: 100rpx;

		.popupCont {
			z-index: 7;
			width: 80%;
			background: #FF4A4C;
			padding: 10upx;
			border-radius: 20upx;

			.popupTopImg {
				position: absolute;
				z-index: 8;
				width: 450upx;
				height: 160upx;
				left: 50%;
				margin-left: -225upx;
				margin-top: -120upx;
			}

			.conLists {
				border-radius: 20upx;
				background: #FFFFFF;
				position: relative;
				padding: 60upx 40upx 40rpx;

				.listItem {
					width: 100%;
					background: #FFFFFF;
					margin-bottom: 20upx;
					border-bottom: 1px solid #EEEEEE;
					height: 160upx;

					.listImg {
						width: 140upx;
						height: 140upx;
						border: 1px solid #EEEEEE;
						border-radius: 20upx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.listtext {
						width: 330upx;
						padding: 30upx;

						.textTitle {
							font-size: 32upx;
							font-weight: 400;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.textMs {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							color: #888888;
							margin-top: 10upx;
						}
					}

					&::last-child {
						margin-bottom: 0;
					}
				}

				.susseP {
					margin-bottom: 20upx;
				}

				.failImage {
					text-align: center;

					.iconfont {
						font-size: 110rpx;
						color: #FF4A4C;
					}
				}

				.susseImage {
					text-align: center;
					width: 110rpx;
					height: 110rpx;
					line-height: 110rpx;
					border-radius: 50%;
					margin: 0 auto;
					background-color: #FF4A4C;

					.icon-xuanzhong {
						font-size: 80rpx;
						color: #FFFFFF;
					}
				}

				.susseTip {
					color: #FF4A4C;
					font-size: 60upx;
					font-weight: 400;
					text-align: center;
					margin-top: 20upx;
				}

				.pirz_tip {
					text-align: center;
					margin-top: 20upx;
					color: #888888;

					text {
						color: #FF4A4C;
						margin: 0 10upx;
					}
				}

				.rich-text-box {
					max-height: 60vh;
					overflow-y: auto;

					.act_ms {
						color: #333333;
						line-height: 40upx;
					}
				}
			}

			.submitBtn {
				width: 240upx;
				height: 80upx;
				margin: 50rpx 16rpx 30upx;
				text-align: center;
				line-height: 80upx;
				font-size: 32upx;
				color: #ae1f30;
			}
		}
	}
</style>